#page-search
#page-details
  >.back-btn
    opacity 0
    transition all .6s ease
    &.show
      opacity 1
  >.leftnav
    top 172px
    width 255px
    left 'calc(50% - %s)' % (@width + 597px)
    position absolute
    opacity 0
    transition opacity 1s linear
    &.show
      opacity 1
    .title
      color #ffb924
      font-size 24px
      margin-bottom 30px
    label 
      margin 5px 0
      .cont 
        width 101px
        height 45px
        box-sizing border-box
        cursor pointer
        position relative
        line-height 45px
        font-size 16px
        margin 15px 0
        padding-left 16px
    label [type=radio]
      display none
    label div
      color #03acca
    [type=radio]:checked + .cont
      background: url(../img/search-type.png)
      color #ff3c00
      background-size contain
      padding-left 0
      text-align center
    label>.time
      visibility: visible
      opacity 0
      transform: translateY(50px)
      transition all .5s ease
      input
        background: url(../img/timebg.png)
        width 255px
        height 45px
        background-size contain
        border none
        outline none
        text-indent 1em
        color #03acca
        font-size 16px
        display: block
        text-align center
      span
        width 13px
        border 1px solid #575fa6
        height 1px
        display block
        margin 3px 0
        margin-left 121px
    [type=radio]:checked ~ .time
      opacity: 1
      visibility: visible
      transform: translateY(0)
  .sure 
    button
      width 69px
      height 45px
      background url(../img/sure.png)
      background-size contain
      color #9ab0f7
      border none
      outline none
      margin-top 15px
      Cursor pointer

  .rightcont
    top 156px
    left calc(50% - 597px)
    position absolute
    width 1180px
    bottom 0
    .articledetail
      display block
      opacity 1
      transition opacity .3s linear
      &.show
        opacity 1  
    .articleList
    .articledetail
      height 100%
      opacity 0
      .title 
        font-size 28px
        color #dce5ff
        display flex
        justify-content space-between
        line-height 34px
        align-items center
        margin 20px 0
        & p:nth-child(1)
          width 1000px
          margin 0
        a
          color #dce5ff
          text-decoration none
        .reltime 
          font-size 16px
          color #dce5ff
          margin 0
      .source
        display flex
        justify-content space-between
        list-style none
        padding 0
        margin 0
        li
          color #097e93
          font-size 14px
          height 34px
          line-height 34px
          margin 10px 0 24px 0
          width 100%
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
          &:last-child
            text-align right
          &:nth-of-type(2)
          &:nth-of-type(3)
            padding-left 7%
      .continfo
        position absolute
        bottom 100px
        font-size 14px
        color #6f87c9
        line-height 24px
        width 1180px
        overflow hidden
        overflow-y auto
        mask-image linear-gradient(#000 85%, transparent)
        padding-bottom 80px
        p
          text-indent 2em
          margin-top 0
    .articleList
      display block
      padding-top 20px
      opacity 0
      transition opacity .3s linear
      &.show
        opacity 1
      .listcon
        height: 755px
        .datanull
          text-align center
          color #6f87d6
          font-size 24px
          padding-top 50px
        .title
          font-size 18px
          Cursor pointer
          margin 0
          &>p:nth-child(1)
              width 1050px
              text-overflow ellipsis
              overflow hidden
              white-space nowrap
          & a:hover
            color red
          .reltime
            font-size 14px
        .introInfo
          color #6f87d6
          font-size 14px
          width 1160px
          margin 0
          line-height 24px
          height 48px
          overflow hidden
          text-overflow ellipsis
          -webkit-line-clamp 2
          display -webkit-box
          -webkit-box-orient vertical
        .source
          li
        .listInfo
          &:nth-child(1),&:nth-child(2),&:nth-child(3)
            .title
              a
                color red
      .page
        text-align cneter
        opacity 0
        transition opacity 1s linear
        &.show
          opacity 1
        ul
          list-style none 
          margin 0
          padding 0
          display flex
          justify-content center
          li
            background url(../img/page.png)
            width 48px
            height 43px
            background-size contain
            line-height 43px
            text-align center
            color #9ab0f7
            margin 0 5px
            Cursor pointer
            &.active
              background url(../img/pageactive.png)
            &:nth-child(1)
            &:last-child
              background: url(../img/prevpage.png)
              width 88px
              height 43px

#page-details
  >.leftnav
    width 101px
    left calc(50% - 760px)

.layout0
  #page-search
  #page-details
    .leftnav
      left 180px
    .rightcont
      left 450px 
      right 50px important

